<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<!--xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" 表示的是spring security 的标签支持-->
<head>
    <meta charset="UTF-8">
    <!--sec:authentication="name" 获得当前用户名-->
    <title sec:authentication="name"></title>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{js/jquery-1.8.3.js}"></script>
    <style type="text/css">
        body {
            padding-top: 50px;
        }

        .starter-tempalte {
            padding: 40px 15px;
            text-align: center;
        }
    </style>
</head>
<body>
<nav class="navber navbar-inverse navbar-fixed-top ">
    <div class="container">
        <a class="navbar-brand" href="#">Spring Security演示</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a th:href="@{/}">首页</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li><a id="getname">用户名称</a></li>
        </ul>
    </div>
</nav>
<div class="container">
    <div class="starter-tempalte">
        <h1 th:text="${msg.title}"></h1>
        <p class="bg-primary" th:text="${msg.content}"></p>
        <div sec:authorize="hasRole('ROLE_ADMIN')">
            <p class="bg-info" th:text="${msg.etraInfo}"></p>
        </div>
        <div sec:authorize="hasRole('ROLE_USER')">
            <p class="bg-info" id="userRole">无更多信息</p>
        </div>
        <form th:action="@{/logout}" method="post">
            <input type="submit" class="btn btn-primary" value="注销">
        </form>
    </div>
</div>

</body>
<script type="text/javascript">
    $("#getname").on("click", function () {
        $.get("http://localhost:5000/getName",function (data) {
            if(data == null && data == ""){
                $("#userRole").text("无更多信息");
            }else{
                $("#userRole").text(data);
            }
        });
    });
</script>

</html>